<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ---------- 通用重置 ---------- */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
            background: #fafafa;
            color: #333;
            line-height: 1.5;
        }

        /* ---------- 外层居中 ---------- */
        .root {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
            padding: 40px 0;
        }

        /* ---------- 文章列表 ---------- */
        .aritlceList {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding-top: 100px;
            flex: 1;
            width: 90%;
            max-width: 720px;
            border-radius: 6px;
            border: 1px dotted black;
        }


        /* ---------- 文章搜索输入框 ---------- */
        /* 容器 */
        .search {
            display: inline-flex;
            width: 70%;
            /* 让输入框和图标同行 */
            align-items: center;
            background: #fff;
            border: 1px solid #d0d7de;
            border-radius: 8px;
            padding: 6px 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
            transition: border-color .2s, box-shadow .2s;
        }

        /* 聚焦时高亮 */
        .search:focus-within {
            border-color: #0969da;
            box-shadow: 0 0 0 3px rgba(9, 105, 218, .15);
        }

        /* 输入框本身去掉默认样式 */
        .search input[type="text"] {
            border: none;
            outline: none;
            background: transparent;
            font-size: 14px;
            line-height: 1.5;
            flex: 1;
            /* 占满剩余宽度 */
            min-width: 220px;
            /* 按需调整 */
        }

        /* 图标（可选） */
        .search::before {
            content: "🔍";
            margin-right: 8px;
            font-size: 16px;
            opacity: .6;
        }

        /* ---------- 单张卡片 ---------- */
        .articleCard {
            display: flex;
            flex-direction: column;
            margin-top: 70px;
            border-bottom: 1px solid #ccc;
        }

        .articleCard:last-child {
            border-bottom: none;
        }

        /* 头部内容区 */
        .front {
            padding: 20px 24px;
        }

        .title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .content {
            font-size: 14px;
            color: #555;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: overflow;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 底部操作区 */
        .end {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 24px;
            border-top: 1px solid #f0f0f0;
        }

        .header {
            flex: 1;
        }

        .footer {
            width: 70px;
            text-align: right;
        }

        /* ---------- 评论组件 ---------- */
        /* ========== 评论区域整体 ========== */
        .comment {
            display: flex;
            flex-direction: column;
            gap: 12px;
            /* 图标与列表间距 */
        }

        .comment .icon {
            width: 40px;
        }

        /* 评论列表容器 */
        .comemnt_list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            /* 每条评论间距 */
        }

        /* 单条评论 */
        .comment_list_item {
            display: flex;
            align-items: flex-start;
            /* 头像置顶 */
            gap: 10px;
            padding: 8px 0;
            /* 上下留呼吸感 */
            border-bottom: 1px solid #f0f0f0;
            /* 线条分隔 */
        }

        .comment_list_item:last-of-type {
            border-bottom: none;
            /* 最后一条不要线 */
        }

        /* 头像 */
        .avatar {
            flex-shrink: 0;
            position: relative;
        }

        .avatar img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid #e0e0e0;
        }

        /* 右侧信息 */
        .comment_info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .avatarName {
            font-size: 13px;
            font-weight: 600;
            color: #222;
        }

        .comment_text {
            font-size: 14px;
            color: #555;
            line-height: 1.45;
            word-break: break-all;
        }

        /* 查看更多文字链 */
        .more-link {
            font-size: 13px;
            color: #777;
            text-decoration: underline;
            margin-top: 4px;
            align-self: flex-start;
            transition: color .2s;
        }

        .more-link:hover {
            color: #111;
        }

        /* 文字链 */
        .more-link {
            font-size: 13px;
            color: #777;
            text-decoration: underline;
            margin-top: 4px;
            /* 与上面评论留点呼吸感 */
            align-self: flex-start;
            /* 不撑满整行 */
            transition: color .2s;
        }

        .more-link:hover {
            color: #111;
        }

        .avatar {
            display: flex;
            width: 40px;
            align-items: center;
            gap: 6px;
        }

        .avatar img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid #e0e0e0;
        }

        .avatarName {
            font-size: 12px;
            color: #777;
        }

        /* ---------- 查看按钮 ---------- */
        .footer button {
            width: 60px;
            height: 32px;
            border: 1px solid #d0d0d0;
            background: #fff;
            border-radius: 4px;
            font-size: 13px;
            color: #555;
            cursor: pointer;
            transition: all .2s;
        }

        .footer button:hover {
            border-color: #999;
            color: #000;
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="aritlceList">
            <div class="search">
                <input type="text">
            </div>
            <div class="articleCard">
                <div class="front">
                    <div class="title">标题一</div>
                    <div class="content">
                        文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容
                    </div>
                </div>
                <div class="end">
                    <div class="header">
                        <!-- 评论组件结构 -->
                        <div class="comment">
                            <img class="icon" src="./src/comment.png" alt="">
                            <div class="comemnt_list">
                                <!-- 评论 1 -->
                                <div class="comment_list_item">
                                    <div class="avatar">
                                        <img src="./src/头像.png" alt="">
                                    </div>
                                    <div class="comment_info">
                                        <div class="avatarName">小明</div>
                                        <div class="comment_text">4244342424234242424234232</div>
                                    </div>
                                </div>

                                <!-- 评论 2 -->
                                <div class="comment_list_item">
                                    <div class="avatar">
                                        <img src="./src/头像.png" alt="">
                                    </div>
                                    <div class="comment_info">
                                        <div class="avatarName">小明</div>
                                        <div class="comment_text">4244342424234242424234232</div>
                                    </div>
                                </div>

                                <!-- 查看更多 -->
                                <a class="more-link" href="detail.html">查看更多评论</a>
                            </div>
                        </div>
                    </div>
                    <div class="footer">
                        <button onclick=findArticle(event)>查看</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="index.js"></script>
    <script>
        //有关数据的用双引号，dom渲染的用单引号
        //将后端的数据进行渲染
        const data = homepate(articleData, commentData, userData)
        //将数据保存在setLocalStorage中，后期跳转页面的时候进行数据传输
        localStorage.setItem("data", JSON.stringify(data))
        //获取到当前用户信息
        localStorage.setItem("userInfo", JSON.stringify(getUser()))

        console.log(data, JSON.parse(localStorage.getItem("data")))
        //先用后端数据进行渲染
        let articleCard = document.querySelector('.articleCard')
        let parentNodeList = articleCard.parentElement
        let searchDiv = document.querySelector('.search')
        // console.log(parentNodeList)
        console.log(articleCard.cloneNode(true))
        //开始渲染数据
        parentNodeList.innerHTML = ''
        parentNodeList.appendChild(searchDiv)
        //模拟测试模板
        parentNodeList.appendChild(articleCard)
        //加个判断
        let isResult = 0;
        data.forEach((item) => {
            //接下来就是将数据渲染到articleCard这个类 html源码
            const cloneDiv = articleCard.cloneNode(true)


            //然后将id赋值到这个div
            cloneDiv.dataset.id = item.id

            cloneDiv.querySelector('.title').innerHTML = item.title
            cloneDiv.querySelector('.content').innerHTML = item.content
            console.log('item', item)

            console.log('commentList', item.commentList)



            //如果评论区没有内容，则清除一下评论区的内容
            if (item.commentList.length === 0) {
                console.log(23)
                const moreDiv = cloneDiv.querySelector('.more-link')
                cloneDiv.querySelector('.comemnt_list').innerHTML = ''
                cloneDiv.querySelector('.comemnt_list').appendChild(moreDiv)
            }

            //记住变量提升，let和const不支持变量提升
            item.commentList.forEach((listItem) => {
                console.log(1)
                //将评论区的数据渲染到页面上, 只渲染一级评论就可以了
                //获取到对应的commentlist结点，复制html模板结点
                const cloneCommentListItem = cloneDiv.querySelector('.comment_list_item').cloneNode(true)
                const cloneCommentListItemParent = cloneDiv.querySelector('.comemnt_list')
                const moreDiv = cloneDiv.querySelector('.more-link')
                console.log('comemnt_list', cloneCommentListItemParent)
                //先清除下内容
                cloneCommentListItemParent.innerHTML = ''
                cloneCommentListItem.querySelector('.avatar').querySelector('img').src = listItem.user.avatar
                cloneCommentListItem.querySelector('.comment_info').querySelector('.avatarName').innerHTML = listItem.user.name
                cloneCommentListItem.querySelector('.comment_info').querySelector('.comment_text').innerHTML = listItem.content

                cloneCommentListItemParent.appendChild(cloneCommentListItem) //为什么渲染不出来
                cloneCommentListItemParent.appendChild(moreDiv)
                console.log(cloneCommentListItem)
                console.log(cloneDiv)

            })

            //然后将克隆结点放到对应的父节点
            parentNodeList.appendChild(cloneDiv)
            //然后将评论区
            // cloneDiv.querySelector('.comemnt_list').innerHTML = 
            isResult = 1
        })


        //最后删除结点，因为是用的是let和const，所以不会变量提升，所以函数作用域是从上到下之执行的，应该没有问题：
        parentNodeList.children[1].remove()
        //这里使用一个定时器来定义时间也是一种方法
        // const timer = setInterval(function () {
        //     if (isResult === 1) {
        //         console.log('渲染完成了');
        //         //最后渲染完之后删除第一个结点
        //         parentNodeList.children[1].remove()
        //         console.log('parentNodeList', parentNodeList)
        //         clearInterval(timer);   // ✅ 传入编号，真正停止
        //     }
        // }, 1000);




        function findArticle(event){
            console.log(event.target)
            const parentNodeListParent = event.target.parentElement.parentElement.parentElement;
            const id = parentNodeListParent.dataset.id
            window.open(`./article.html?id=${id}`,'_blank')
            // event.target.
        }
    </script>
</body>

</html>